<template>
  <div>
    <el-form ref="myform1" :model="formItem" :rules="rules" label-width="80px" size="mini">
      <div v-if="formItem.status === 'run'">
        <div class="anthor-info-head"><i class="el-icon-document" /><span>基本信息</span></div>
        <el-divider />
        <!-- <el-divider content-position="left"><i class="el-icon-document" /><span>接班信息</span></el-divider> -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="接班人" prop="downUserName">
              <el-input v-model="formItem.downUserName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接班时间" prop="downTime">
              <el-date-picker v-model="formItem.downTime" type="datetime" disabled placeholder="请选择接班时间" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接班备注" prop="downNote">
              <el-input v-model="formItem.downNote" placeholder="请输入接班备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div id="module2">
        <div class="anthor-info-head"><i class="el-icon-document" /><span>交班信息</span></div>
        <el-divider />
        <!-- <el-divider content-position="left"><i class="el-icon-document" /><span>交班信息</span></el-divider> -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="值班部门" prop="orgCode">
              <TreeSelect
                v-model="formItem.orgCode"
                :multiple="false"
                :options="availableOganizations"
                :disabled="true"
                placeholder="请选择值班部门"
                style="height:10px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交班人" prop="upUserName">
              <el-input v-model="formItem.upUserName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交班时间" prop="upTime">
              <el-date-picker v-model="formItem.upTime" type="datetime" disabled placeholder="请选择交班时间" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交班备注" prop="upNote">
              <el-input v-model="formItem.upNote" placeholder="请输入交班备注" :disabled="formItem.status!=='created'" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div id="module3">
        <div class="anthor-info-head"><i class="el-icon-document" /><span>交接事项</span></div>
        <el-divider />
        <!-- <el-divider content-position="left"><i class="el-icon-document" /><span>交接事项</span></el-divider> -->
        <el-row :gutter="20">
          <el-col v-for="(item,index) in formItem.items" :key="index" :span="12">
            <el-form-item :label="item.name" :prop="'items.' + index + '.value'" :rules="item.isRequired === true ? rules.isRequired:rules.notRequired">
              <el-input v-model="item.value" placeholder="请输入详细内容" :disabled="formItem.status!=='created'" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import { dutyInfo } from '@neu/dcom-ui/api/teamgroup'
import { detail as functionalDetail } from '@neu/dcom-ui/api/functional'
import { detail, create, update } from '@neu/dcom-ui/api/handover'
import TreeSelect from '@neu/biz-core/components/TreeSelect'
import { tree } from '@neu/auth-ui/api/organization'
// 定义一个表单原始项
const formItem = {
  orgName: '',
  orgCode: null,
  upUserName: '',
  upUserCode: '',
  upTime: new Date(),
  upNote: '',
  downUserName: '',
  downUserCode: '',
  downTime: '',
  downNote: '',
  status: 'created',
  items: []
}
export default {
  name: 'HandoverEditForm',
  components: {
    TreeSelect
  },
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      availableOganizations: [],
      // 编辑的表单内容
      formItem: {
        ...formItem
      },
      // 表单验证规则
      rules: {
        orgCode: [{ required: true, message: '值班部门不能为空', trigger: 'blur' }],
        upUserName: [{ required: true, message: '交班人不能为空', trigger: 'blur' }],
        upTime: [{ required: true, message: '交班时间不能为空', trigger: 'blur' }],
        upNote: [{ required: true, message: '交班备注不能为空', trigger: 'blur' }],
        downUserName: [{ required: true, message: '接班人不能为空', trigger: 'blur' }],
        downTime: [{ required: true, message: '接班时间不能为空', trigger: 'blur' }],
        downNote: [{ required: true, message: '接班备注不能为空', trigger: 'blur' }],
        isRequired: [{ required: true, message: '详细内容不能为空', trigger: 'blur' }],
        notRequired: [{ required: false, trigger: 'blur' }],
        items: []
      }
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: {
      handler() {
        this.fetch()
      },
      immediate: true
    }
  },
  created() {
    tree().then(response => {
      this.availableOganizations = [response.data]
    })
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          this.formItem = {
            ...response.data
          }
          if (this.formItem.status === 'run') {
            this.initUserInfo(1)
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
        this.initUserInfo(2)
      }
    },
    initUserInfo(flag) {
      dutyInfo().then(res => {
        if (res.data.length > 0) {
          if (flag === 2) {
            this.formItem.upUserName = res.data[0].name
            this.formItem.upUserCode = res.data[0].userName
            this.formItem.orgName = res.data[0].orgName
            this.formItem.orgCode = res.data[0].orgCode
            this.formItem.items = []
            functionalDetail(res.data[0].functionalGroupId).then(response => {
              response.data.items.forEach(e => {
                const item = { ...e, value: '' }
                this.formItem.items.push(item)
              })
            })
          } else if (flag === 1) {
            this.formItem.downUserName = res.data[0].name
            this.formItem.downUserCode = res.data[0].userName
            this.formItem.downTime = new Date()
          }
        }
      })
    },
    // 保存操作，返回promise，后续处理交由调用者处理
    save() {
      const updated = this.id !== -1
      return new Promise(resolve => {
        this.$refs.myform1.validate((valid) => {
          if (valid) {
            if (updated) {
              const saveData = { ...this.formItem }
              if (saveData.status === 'run') { saveData.status = 'end' }
              resolve(update(this.id, saveData))
            } else {
              resolve(create(this.formItem))
            }
          } else {
            resolve(false)
          }
        })
      })
    },
    reset() {
      this.$refs.myform1.resetFields()
    }
  }
}
</script>
